import { computed, defineComponent, reactive, ref } from "vue";
import { VisualPackage, VisualDesigner } from "../types/package";
import components from "../components-tsx";
import config from "../component-config.json";
import designer from "../designer.json";
import {
  ElAside,
  ElCard,
  ElContainer,
  ElHeader,
  ElMain,
  ElScrollbar,
} from "element-plus";

export default defineComponent({
  setup() {
    const currentDesigner = reactive<VisualDesigner>(designer);
    const currentComponent = ref<VisualPackage>();
    const Id = ref(0);
    for (let item of currentDesigner.components) {
      Id.value = Id.value < item.id ? item.id : Id.value;
    }

    const currentId = computed(() => ++Id.value);

    return () => (
      <ElContainer>
        <ElHeader height="80px"></ElHeader>
        <ElContainer>
          {/* 左边原料区 */}
          <ElAside>
            <ElScrollbar max-height="400px">
              {config.map((item, index) => (
                <ElCard
                  key={index}
                  onDragstart={() => {
                    currentComponent.value = components[item.name];
                  }}
                  onDragend={(e) => {
                    currentDesigner.components = [
                      ...currentDesigner.components,
                      {
                        id: currentId.value,
                        name: currentComponent.value?.name as string,
                        config: {},
                        style: {},
                      },
                    ];
                    console.log(e);
                    console.log(Id.value);
                  }}
                  onDragOver={(e) => e.preventDefault()}
                  draggable={true}
                  shadow="hover"
                  v-slots={{
                    header: () => item.name,
                  }}
                >
                  {components[item.name].render(item.config, item.style)}
                </ElCard>
              ))}
            </ElScrollbar>
          </ElAside>
          {/* 中间编辑区 */}
          <ElMain>
            {currentDesigner.components.map((item) =>
              components[item.name].render(item.config, item.style)
            )}
          </ElMain>
          {/* 右侧属性区 */}
          <ElAside></ElAside>
        </ElContainer>
      </ElContainer>
    );
  },
});
